<template>
  <div>
    <el-dialog
      title="策略详情"
      :visible="viewDetailDialog"
      width="600px"
      @close="closeViewDetailDialog"
    >

      <el-row class="el-row-box">
        <el-col class="el-col-item">策略名称：{{ policyName }}</el-col>
      </el-row>
      <el-row :gutter="20" class="el-row-box">
        <el-col :span="4" class="el-col-item">策略方案：</el-col>
        <el-col :span="16">
          <el-table
            :data="tableData"
            :row-style="{height:'20px'}"
            :cell-style="{padding:'10px'}"
            style="{font-size: 10px}"
            size:mini
            :header-cell-style="{color:'#333744',background:'rgb(243, 246, 251)'}"
          >

            <el-table-column
              prop="index"
              label="序号"
            />
            <el-table-column
              prop="nodeName"
              label="点位名称"
            />
            <el-table-column
              prop="innerCode"
              label="设备编号"
            />
          </el-table>
        </el-col>
      </el-row>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageConfig.pageSize"
          @current-change="currentChange"
        />
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { vmListPolicyAPI } from '@/api/policy'
export default {
  props: {
    viewDetailDialog: {
      type: Boolean,
      required: true
    },
    policyName: {
      type: String, required: true
    }

  },
  data() {
    return {
      tableData: [],
      total: 0,
      pageConfig: {
        pageIndex: 1,
        pageSize: 10
      },
      ViewDetailId: ''
    }
  },

  mounted() {

  },

  methods: {
    closeViewDetailDialog() {
      this.$emit('closeViewDetailDialog')
    },
    // 父组件调用函数方法，获取到表格数据渲染上去
    async  ViewDetails(id) {
      this.ViewDetailId = id
      const res = await vmListPolicyAPI(id, this.pageConfig)
      this.tableData = res.data.currentPageRecords.map((item, index) => {
        return {
          ...item, index: (this.pageConfig.pageIndex - 1) * this.pageConfig.pageSize + index + 1
        }
      })
      this.total = +res.data.totalCount
    },
    // 页码改变触发
    currentChange(newPage) {
      // 设置最新页码参数
      this.pageConfig.pageIndex = newPage
      // 重新获取数据列表，并展示第newPage页面的数据列表中的内容
      this.$emit('viewDetails', this.ViewDetailId)
    }
  }
}
</script>

<style lang="scss" scoped>

    .el-col-item {
       margin-left: 20px;
        margin-bottom: 30px;
        margin-top: 10px;

    }

</style>
